// footer
import React, { Component } from "react";
import "./index.css";
export default class Footer extends Component {
  // 点击全选checkbox
  handle_allCheckbox = (event) => {
    console.log(5);
    console.log(event.target.checked);
    let done = event.target.checked
    this.props.handle_allCheckbox(done)
  };
  clear_allDone = () => {
    this.props.clear_allDone()
  }
  render() {
    let { todos } = this.props;
    console.log(this.props.todos);
    let doneCount = this.props.todos.reduce(
      (pre, cur) => pre + (cur.done === true ? 1 : 0),
      0
    );
    console.log(doneCount);
    return (
      <div>
        <input
          type="checkbox"
          checked={todos.every((item) => item.done === true) && todos.length !== 0}
          onChange={this.handle_allCheckbox}
        />
        <span>
          已完成{doneCount}/全部{this.props.todos.length}
        </span>
        <button onClick={this.clear_allDone}>清除所有已完成</button>
      </div>
    );
  }
}
